<template>
	<view>
		<view class="container">
			<swiper class="swiper" :autoplay="false" previous-margin="100rpx" next-margin="100rpx" :current="nowIndex" @change="changeBox">
				<block v-if="imageList.length">
					<swiper-item class="boxItem" v-for="(item, index) in imageList" :key="index">
						<view class="sportTitle">上传一张{{ item.SportType }}照片</view>
						<view class="bannerImageBox">
							<view class="adverimg" :class="{ 'nowImg': nowIndex == index }" @click="lookimg(item.ImageUrl)">
								<image :src="item.ImageUrl" mode="aspectFill"></image>
							</view>

							<view class="changeimg" :style="{ opacity: nowIndex == index ? '1' : '0' }" @click="upload(index)">选择照片
							</view>
						</view>
					</swiper-item>
					
				</block>
				
			</swiper>
		</view>
		<view class="bottombtn">
			<!-- <view class="paybtn" @click="upload(nowIndex)">更换图片</view> -->
			<view class="paybtn" @click="saveImg()">保存</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			imageList: [
				// {
				// 	ImageUrl: "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724108647953234.jpg",
				// },
				// {
				// 	ImageUrl: "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724108647953234.jpg",
				// },
				// {
				// 	ImageUrl: "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724108647953234.jpg",
				// },
				// {
				// 	ImageUrl: "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724108647953234.jpg",
				// },
			],
			imgArr: [],
			nowIndex: 0,
			user:{}
		};
	},
	async onLoad() {
		await this.getUserInfo()
		this.getUserImg()
	},
	onShareAppMessage() {
		// 对于微信小程序，返回null表示禁止分享
		return null;
	},
	methods: {
		async getUserInfo(){
			let res = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			})
			this.user = res.data || false
		},
		async getUserImg() {
			let sportType = uni.getStorageSync("sportType")
			let res = await this.$api.post("/Member/GetUserImages");
			if (res.code == 0) {
				if (res.data) {
					for (let i = 0; i < res.data.length; i++) {
						if (sportType == res.data[i].SportType) {
							console.log('22222');
							
							this.imageList.push(res.data[i])
							
						}

					}
					if(this.imageList.length==0){
						this.imageList.push({
							ImageUrl:this.user.HeadImgUrl,
							SportType:sportType,
							UserID:this.user.UserID
						})
					}
				}
				console.log(this.imageList,'111');
				
				// if (sportType) {
				// 	for (let i = 0; i < res.data.length; i++) {
				// 		if (sportType == res.data[i].SportType) {
				// 			this.imageList.push(res.data[i])
				// 		}

				// 	}
				// } else {
				// 	this.nowIndex = 0
				// }
			}
		},
		upload(index) {
			let _this = this;
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res, 'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
						let o = {
							duration: 0,
							fileType: res.tempFiles[i].fileType,
							tempUrl: res.tempFiles[i].tempFilePath,
							flieUrl: res.tempFiles[i].tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};
						_this.imgArr.push(o);

						let rex = await _this.uploading(o.flieUrl, o.tempKey, index);
					}
				},
			});
		},
		//文件上传
		async uploading(url, tempKey, index) {
			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.imgArr.length; i++) {
					if (this.imgArr[i].tempKey == tempKey) {
						this.imgArr[i].pro = pro;
					}

				}
			});
			console.log(r, 'r');
			for (let i = 0; i < this.imgArr.length; i++) {
				if (this.imgArr[i].tempKey == tempKey) {
					this.imgArr[i].netPath = r;
				}
			}
			this.$pv.closeLoad()
			// this.reqData.Images.push(r)
			this.imageList[index].ImageUrl = r
		},
		lookimg(url) {
			uni.previewImage({
				urls: [url],
				current: 0,
			})
		},
		// 滑动轮播图
		changeBox(event) {
			this.nowIndex = event.detail.current;
		},
		async saveImg() {
			let user = uni.getStorageSync("user");
			const res = await this.$api.post("/Member/EditUserImage", {
				ImageUrl:this.imageList[0].ImageUrl,
				SportType:uni.getStorageSync("sportType"),
				UserID:this.user.UserID
			});
			if (res.code == 0) {
				this.$pv.msg('保存成功！')
			} else {
				this.$pv.msg(res.message)
			}

		},
	},

}
</script>
<style lang='scss'>
.container {
	width: 100%;
}

view {
	box-sizing: border-box;
}

.swiper {
	width: 100%;
	height: 970rpx;

	.boxItem {
		padding-top: 40rpx;

		.sportTitle {
			color: #333333;
			position: relative;
			font-size: 40rpx;
			font-weight: 700;
			text-align: center;
		}
	}

	.bannerImageBox {
		width: 100%;
		height: 92%;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;

		.adverimg {
			height: calc(450rpx * 1.3);
			width: calc(340rpx * 1.3);
			border-radius: 16rpx;
			display: block;
			overflow: hidden;
			transition: all 0.3s;

			>image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}


		.changeimg {
			width: 200rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 44rpx;
			background-color: #706eee;
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			margin: 0 auto;
			margin-top: 36rpx;
			transition: all 0.3s;
		}
	}

	.nowImg {
		height: calc(450rpx * 1.6) !important;
		width: calc(340rpx * 1.6) !important;
		// transform: scale(1.3);
	}
}



.bottombtn {
	width: 100%;
	padding-bottom: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;

	.paybtn {
		width: 670rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
		margin-top: 36rpx;

		// position: fixed;
		// bottom: 88rpx;
		// left: 50%;
		// transform: translateX(-50%);
	}
}
</style>